<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <title>微信</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .fr{
            float: right;
        }
        .fl{
            float: left;
        }
        .clearfix:after{
            content: "";
            clear: both;
            display: block;
        }
        .all-box{
            position: relative;
        }
        /*头部*/
        .header{
            height: 50px;
            line-height: 50px;
            background: #303030;
            padding-left: 1rem;
            position: fixed;
            top:0px;
            left:0px;
            width:100%;
            z-index: 2;
        }
        .header .colorwhite{
            color: white;
        }
        .header .pic{
            margin:6px 20px;
        }
        /*头部*/

        /*搜索*/
        .search{
            margin-top: 50px;
            background:#f2f2f2;
            padding:10px;
            text-align:center;
            line-height:30px;
        }
        .search .input{
            height:30px;
            background:white;
            border-radius:4px;
        }
        .search span{
            background:url(搜索.png) no-repeat 3px center;
            padding-left:30px;
            font-size:14px;

        }
        /*搜索*/

        /*聊天列表*/
        .chatlist .chat1{
            padding: 2% 3%;
            border-bottom: 1px solid #F1F1F1;
            position: relative;
        }
        .chatlist .chat1 img{
            width: 16%;
            border-radius: 4px;
        }
        .chatlist .chat1-right{
            margin: 2% 0px 0px 4%;
        }
        .chatlist .chat1-right .title{
            font-weight:900;
            font-size:14px;
        }
        .chatlist .chat1-right .msg{
            font-size:12px;
            color:#999;
            margin-top:6%;
        }
        .chatlist .chat1 .time{
            position:absolute;
            right:5%;
            top:22%;
            font-size:10px;
            color:#999;
        }
        /*聊天列表*/


        /*导航栏*/
        .nav{
            height:10%;
            line-height: 10%;
            padding:12px 0;
            /*text-align: center;*/
            background:#f6f6f6;
            position:fixed;
            bottom:0px;
            left:0px;
            width:100%;
            z-index:3;
        }
        .nav div{
            font-size:10px;
            width:25%;
            text-align:center;
            line-height:90px;
        }
        .nav .wechat{
            background: url("消息 (1)(1).png")no-repeat center 8px;
        }
        .nav .friends{
            background: url("通讯录(1).png")no-repeat center 8px;
        }
        .nav .faxian{
            background: url("发现(1).png")no-repeat center 8px;
        }
        .nav .my{
            background: url("我(1).png")no-repeat center 8px;
        }

        /*导航栏*/

        #menu{
            width: 50%;
        
            background: #393A3F;
            box-shadow: 1px 1px 16px 4px #D4D4D4;
            position:fixed;
            top:48px;
            right:10px;
            z-index:1;
            display:none;
        }
        #menu div{

            text-align: left;
            /*padding-left: 20px;*/
            padding: 1rem 0 1rem 3.6rem;
            color: white;
            border-bottom: 1px solid #303030;
        }
        .qunliao{
            background: url("消息 (1)(1).png")no-repeat 18px;
        }
        .tianjia{
            background: url("添加好友.png")no-repeat 18px;
        }
        .saoyisao{
            background: url("扫一扫.png")no-repeat 18px;
        }
        .shoufukun{
            background: url("收付款.png")no-repeat 18px;
        }
        .bangzhu{
            background: url("短信.png")no-repeat 18px;
        }
    </style>
</head>
<body>
<div class="all">
    <!--头部-->
    <div class="header clearfix">
        <span class="colorwhite">微信</span>
        <div class="pic fr" onclick="showOrHide()"><img src="加号.png" height="24" width="24"/></div>
        <div class="pic fr"><img src="搜索.png" height="24" width="24"/></div>
    </div>
    <!--头部-->

    <!--搜索-->
    <div class="search">
        <div class="input">
            <span>搜索</span>
        </div>
    </div>
    <!--搜索-->

    <!--聊天列表-->
    <div class="chatlist">
        <div class='chat1 clearfix'>
            <img src='taiyang.jpg'  class="fl"/>
            <div class='chat1-right fl'>
                <div class='title'>订阅号</div>
                <div class='msg'>太阳君一号：欢迎小可爱</div>
            </div>
            <div class='time'>下午7:19</div>
        </div>

        <div class='chat1 clearfix'>
            <img src='taiyang1.jpg'  class="fl"/>
            <div class='chat1-right fl'>
                <div class='title'>斯文败类</div>
                <div class='msg'>[视频]</div>
            </div>
            <div class='time'>下午5:20</div>
        </div>

        <div class='chat1 clearfix'>
            <img src='小兔子.jpg'  class="fl"/>
            <div class='chat1-right fl'>
                <div class='title'>王敏</div>
                <div class='msg'>我饿了，我们什么时候去吃饭</div>
            </div>
            <div class='time'>下午5:00</div>
        </div>

        <div class='chat1 clearfix'>
            <img src='gangtiexia.jpg'  class="fl"/>
            <div class='chat1-right fl'>
                <div class='title'>老大</div>
                <div class='msg'>要吃什么</div>
            </div>
            <div class='time'>上午11:20</div>
        </div>

        <div class='chat1 clearfix'>
            <img src='wangji.jpg'  class="fl"/>
            <div class='chat1-right fl'>
                <div class='title'>小可爱</div>
                <div class='msg'>在干嘛呢</div>
            </div>
            <div class='time'>上午10:20</div>
        </div>

        <div class='chat1 clearfix'>
            <img src='tuifei.jpg'  class="fl"/>
            <div class='chat1-right fl'>
                <div class='title'>颓废即本人</div>
                <div class='msg'>什么时候有时间，聚聚</div>
            </div>
            <div class='time'>昨晚10:20</div>
        </div>


        <div class='chat1 clearfix'>
            <img src='taiyang.jpg'  class="fl"/>
            <div class='chat1-right fl'>
                <div class='title'>订阅号</div>
                <div class='msg'>太阳君一号：欢迎小可爱</div>
            </div>
            <div class='time'>下午7:19</div>
        </div>

        <div class='chat1 clearfix'>
            <img src='taiyang1.jpg'  class="fl"/>
            <div class='chat1-right fl'>
                <div class='title'>斯文败类</div>
                <div class='msg'>[视频]</div>
            </div>
            <div class='time'>下午5:20</div>
        </div>

        <div class='chat1 clearfix'>
            <img src='小兔子.jpg'  class="fl"/>
            <div class='chat1-right fl'>
                <div class='title'>王敏</div>
                <div class='msg'>我饿了，我们什么时候去吃饭</div>
            </div>
            <div class='time'>下午5:00</div>
        </div>

        <div class='chat1 clearfix'>
            <img src='gangtiexia.jpg'  class="fl"/>
            <div class='chat1-right fl'>
                <div class='title'>老大</div>
                <div class='msg'>要吃什么</div>
            </div>
            <div class='time'>上午11:20</div>
        </div>

        <div class='chat1 clearfix'>
            <img src='wangji.jpg'  class="fl"/>
            <div class='chat1-right fl'>
                <div class='title'>小可爱</div>
                <div class='msg'>在干嘛呢</div>
            </div>
            <div class='time'>上午10:20</div>
        </div>

        <div class='chat1 clearfix'>
            <img src='tuifei.jpg'  class="fl"/>
            <div class='chat1-right fl'>
                <div class='title'>颓废即本人</div>
                <div class='msg'>什么时候有时间，聚聚</div>
            </div>
            <div class='time'>昨晚10:20</div>
        </div>
    </div>
    <!--聊天列表-->

    <!--底部导航-->
    <div class="nav clearfix">
        <div class="wechat fl">微信</div>
        <div class="friends fl">通讯录</div>
        <div class="faxian fl">发现</div>
        <div class="my fl">我</div>
    </div>

    <!--底部导航-->

    <div id="menu">
        <div class="qunliao">发起群聊</div>
        <div class="tianjia">添加朋友</div>
        <div class="saoyisao">扫一扫</div>
        <div class="shoufukun">收付款</div>
        <div class="bangzhu">帮助与反馈</div>
    </div>

</div>
<script>
    var i = 0;
    function showOrHide(){
        if(i==0){
            menu.style.display = "block";
            i = 1;
        }else{
            menu.style.display = "none";
            i = 0;
        }
    }
</script>
</body>
</html>